<BASE href="/"> 
<div class="tnm-col-left">
	<h2 class="title-tnm-col-left">Sơ đồ bàn</h2>
    <!--div class="sort">
        <div class="button"><a href="#">Đang có khách</a></div>
        <div class="button" style="margin-left:5px"><a href="#">Bàn trống</a></div>	
    </div-->
    <div class="content-tnm-col-left">
    	<div id="photo_gallery" style="width:1015px; height:600px;">
        	<div id="photoContainer" style="width:1015px; height:600px;  left:-30px">
              <div id="photoImages">
                <ul style="height:600px; width:1015px; left:-60px">
                <?php for ($i=1; $i<=$totalTables; $i++) : ?>
                <?php $checkout = OrdersTables::model()->checkoutByTable($i);  ?>
                  <a href="#" class="none" rel="<?php echo $checkout['total_money']; ?>" id="canteen_table_<?php echo $i; ?>" onclick="getAjaxTable(<?php echo $i; ?>);return false;">
                    <li>
                        <span class="text"><?php echo Yii::app()->numberFormatter->format('00', $i); ?></span>
                        <span class="money"><label id="total_money_table_<?php echo $i; ?>"><?php echo Yii::app()->numberFormatter->format('###,###,###,###', $checkout['total_money']); ?></label> vnd</span>
                    </li>
                  </a>
                <?php endfor; ?>	
                </ul>                   
              </div>
            </div>
    	</div>         	
    </div>
    <div class="bottom-tnm-col-left"></div>
</div>
<div class="tnm-col-right">
</div>
<div class="tnm-col-left" style="padding:5px 20px 0px 6px">
    <div class="note-left">Đang có khách</div>
    <div class="note-right">Bàn trống</div>
</div>
<script type="text/javascript">
    function getAjaxTable(table_id)
    {      
        if (typeof(table_id) == 'undefined') return;
        $.ajax({
            type  : "GET",
            cache : false,
            url   : base_url + '/canteen/detail/table_id/' + table_id,
            success: function(returnContent){
                $(".tnm-col-right").html(returnContent);
                $('#add-drink-form').attr('action', base_url + '/canteen/detail/table_id/' + table_id);
                $('#add-clothing-form').attr('action', base_url + '/canteen/detail/table_id/' + table_id);
                $('#map-stadium-form').attr('action', base_url + '/canteen/mapstadium/table_id/' + table_id);
                $("#hi-drink-table").val(table_id);
            }
        });
    }
    $(document).ready(function(){     
        $('#canteen_table_' + <?php echo $table_id; ?>).trigger('click');
        $('#canteen_table_' + <?php echo $table_id; ?>).addClass('active').removeClass('none');
        $('#canteen_table_' + <?php echo $table_id; ?>).find('li').css({'background':'url(' + base_url + '/images/sprites.png) no-repeat -444px -335px', 'cursor':'pointer'});
    	$('#canteen_table_' + <?php echo $table_id; ?>).find('.text').css({ color:'#48c223'});
        submitAjaxForm('add-drink-form');
        submitAjaxForm('add-clothing-form');
        submitAjaxFormMapStadium('map-stadium-form');
    });
    function submitAjaxForm(form)
    {
        $('#'+form).ajaxForm(function(response){
            table_id = $('#hi-drink-table').val();
            $('#total_money_table_'+table_id).text(response);
            getAjaxTable(table_id);
            alert('Thực hiện thành công');
            $('.dialog-add-drink').dialog('close');
            $('.dialog-add-fashion').dialog('close');
        });
    }
    function submitAjaxFormMapStadium(form)
    {
        $('#'+form).ajaxForm(function(response){
            table_id = $('#hi-drink-table').val();
            getAjaxTable(table_id);
            alert('Thực hiện thành công' + response);
            $('.dialog-map-stadium').dialog('close');
        });
    }
</script>
<!-- ----------------Map Stadium---------------------- -->
<div id="dialog-map-stadium" class="dialog-map-stadium" title="Gắn sân">
	<div class="dialog-new">
        <form name="map-stadium-form" id="map-stadium-form" onsubmit="return false;" action="<?php echo $this->createUrl('/canteen/mapstadium', array('table_id' => $table_id)); ?>" method="post">
            <div class="style-form">
                <dl>
                    <dt>Sân:</dt>
                    <dd>
                        <select name="MapStadium">
                            <?php foreach ($arrStadiums as $value) echo "<option value='{$value->id}'>{$value->name}</option>"; ?>
                        </select>
                    </dd>                     
                </dl>
                <dl>
                    <dt></dt>
                    <dd>
                        <div class="button"><a href="#" onclick="$('#map-stadium-form').submit();return false;">Gắn</a></div>
    					<div class="button" style="margin-left:5px"><a href="#" onclick="$( '.dialog-map-stadium' ).dialog( 'close' );return false;">Hủy</a></div>
                    </dd>                  
                </dl>
            </div>
        </form>
    </div>
</div>

<!-- ------------POPUP ADD DRINKS--------------------- -->
<input type="hidden" id="hi-drink-table" />
<div  class="dialog-add-drink" title="THÊM THỨC UỐNG">
    <div class="table-add-drink">
        <table class="DataTable" cellpadding="0" cellspacing="0">
            <form name="add-drink-form" id="add-drink-form" onsubmit="return false;" action="<?php echo $this->createUrl('/canteen/index', array('table_id' => $table_id)); ?>" method="post">
            <tr class="head">
                <td width="180">Tên</td>
                <td width="100">Số lượng</td>
                <td width="*">Thành tiền</td>
            </tr>
            <?php $drink_length = 0; ?>
            <?php foreach ($listDrinks as $index => $drink) : ?>
            <tr class="<?php echo ($index % 2 == 0)?'even':'odd'; ?>" id="tableRow_1" onmouseover="tableRowHover(this,1);" onmouseout="tableRowHover(this,0);" onclick="rowSelection(this);">
                <td><?php echo $drink->type; ?></td>
                <td>
                    <select style="width:50px" name="Drinks[<?php echo $drink->id; ?>]" id="Drinks_<?php echo $drink->id; ?>" onchange="selectDrink(<?php echo $drink->id; ?>, this.value, <?php echo $drink->price; ?>);">
                        <?php for ($i=0; $i<=$drink->number(); $i++) echo "<option value='{$i}'>{$i}</option>"; ?>
                    </select>
                </td> 
                <td><label id="drink_<?php echo $drink->id; ?>">0</label></td>
            </tr>
            <?php $drink_length = max($drink_length, $drink->id); ?>
            <?php endforeach; ?>
            </form>
        </table>
    </div>
    <div class="total">TỔNG CỘNG: <span style="padding-left:80px"><label id="total_money">0</label> đ</span></div>
    <div style="margin-left:170px">
    	<div class="button"><a href="#" onclick="$('#add-drink-form').submit();return false;">Xong</a></div>
    	<div class="button" style="margin-left:5px"><a href="#" onclick="$('.dialog-add-drink').dialog('close');return false;">Hủy</a></div>
    </div>
    <script type="text/javascript">
        function selectDrink(id, number, price)
        {
            $('#drink_'+id).text(number * price);
            total_money = 0;
            for (i=0; i<=<?php echo $drink_length; ?>; i++)
                if ($('#drink_'+i).text())
                    total_money += parseInt($('#drink_'+i).text());
            $('#total_money').text(total_money);
        }
    </script>
</div>

<!-- ------------POPUP ADD FASHION--------------------- -->
<div class="dialog-add-fashion" title="THÊM ĐỒNG PHỤC">
    <div id="tabs1">
        <ul>
            <?php foreach ($listClothings as $type) : ?>
            <li><a href="#tabs-<?php echo $type->id; ?>"><?php echo $type->name; ?></a></li>
            <?php endforeach; ?>
        </ul>
        <?php $clothing_length = 0; ?>
        <form name="add-clothing-form" id="add-clothing-form" action="<?php echo $this->createUrl('/canteen/index', array('table_id' => $table_id)); ?>" method="post">
        <?php foreach ($listClothings as $type) : ?>
        <div id="tabs-<?php echo $type->id; ?>" style="padding-bottom:15px" class="ui-helper-clearfix">
        	<div class="table-add-drink">
                <table class="DataTable" cellpadding="0" cellspacing="0">                    
                    <tr class="head">
                        <td width="180">Tên</td>
                        <td width="100">Số lượng</td>
                        <td width="*">Thành tiền</td>
                    </tr>
                    <?php foreach ($type->clothings as $clothing) : ?>
                    <tr class="even" onmouseover="tableRowHover(this,1);" onmouseout="tableRowHover(this,0);" onclick="rowSelection(this);">
                        <td><?php echo $clothing->type; ?></td>
                        <td>
                        	<select style="width:50px" name="Clothings[<?php echo $clothing->id; ?>]" id="Clothings_<?php echo $clothing->id; ?>" onchange="selectClothing(<?php echo $clothing->id; ?>, this.value, <?php echo $clothing->price; ?>);">
                                <?php for ($i=0; $i<=$clothing->number(); $i++) echo "<option value='{$i}'>{$i}</option>"; ?>
                            </select>
                        </td> 
                        <td><label id="clothing_<?php echo $clothing->id; ?>">0</label></td>
                    </tr>
                    <?php $clothing_length = max($clothing_length, $clothing->id); ?>
                    <?php endforeach; ?>
                </table> 
            </div>          
        </div>
        <?php endforeach; ?>
        </form>
        <div style="padding-bottom:15px" class="ui-helper-clearfix">
            <div class="total">TỔNG CỘNG: <span style="padding-left:80px"><label id="total_money_clothing">0</label> đ</span></div>
            <div style="margin-left:170px">
                <div class="button"><a href="#" onclick="$('#add-clothing-form').submit();return false;">Xong</a></div>
                <div class="button" style="margin-left:5px"><a href="#" onclick="$('.dialog-add-fashion').dialog('close');return false;">Hủy</a></div>
            </div>  
        </div>
        <script type="text/javascript">
            function selectClothing(id, number, price)
            {
                $('#clothing_'+id).text(number * price);
                total_money = 0;
                for (i=0; i<=<?php echo $clothing_length; ?>; i++)
                    if ($('#clothing_'+i) && $('#clothing_'+i).text())
                        total_money += parseInt($('#clothing_'+i).text());
                $('#total_money_clothing').text(total_money);
            }
        </script>
    </div>
</div>